<template>
    <div class="login-container">
        <div class="login-logo">
<!--            <img class="img" src="/public/images/logo1.png"/>-->
<!--            <img class="imgSize" src="/public/images/login.png"/>-->
          <h1>{{getThemeConfig.globalViceTitle}}</h1>
        </div>
        <div class="login-content">
            <div class="login-content-main">
                <el-tabs v-model="state.tabsActiveName">
                    <Account @password-dialog="passWordDialog"/>
                </el-tabs>
            </div>
        </div>
<!--        <el-dialog v-model="state.upDataPassword" title="修改密码" width="600px">-->
<!--            <upDataPassword></upDataPassword>-->
<!--        </el-dialog>-->
    </div>
</template>

<script lang="ts" setup>
    import {toRefs, reactive, computed, ref} from "vue";
    import Account from "/@/views/login/component/account.vue";
    import Mobile from "/@/views/login/component/mobile.vue";
    import Scan from "/@/views/login/component/scan.vue";
    import {useStore} from "/@/store/index";
    //import upDataPassword from "/@/views/orgManagement/userManager/changePassword.vue"

    const store = useStore();
    const state = reactive({
        tabsActiveName: "account",
        isTabPaneShow: true,
        upDataPassword: false
    });
    // 获取布局配置信息
    const getThemeConfig = computed(() => {
        return store.state.themeConfig.themeConfig;
    });
    //打开修改密码
    const passWordDialog = (data: boolean) => {
        state.upDataPassword = data;
    }
</script>

<style scoped lang="scss">
    .login-container {
        width: 100%;
        height: 100%;
        background: url("/images/bg.jpg") no-repeat;
        background-size: 100% 100%;

        .login-logo {
            position: absolute;
            top: 25%;
            height: 60px;
            display: flex;
            align-items: center;
            font-size: 20px;
            color: var(--color-primary);
            letter-spacing: 2px;
            width: 100%;
            justify-content: center;
        }

        .login-content {
            width: 400px;
            padding: 20px;
            position: absolute;
            top: 54%;
            left: 50%;
            transform: translate(-50%, -50%) translate3d(0, 0, 0);
            background-color: rgba(255, 255, 255, 0.99);
            border: 5px solid var(--color-primary-light-8);
            border-radius: 15px;
            transition: all 0.3s ease;
            overflow: hidden;
            z-index: 1;

            .login-content-main {
                margin: 0 auto;
                width: 80%;

                .login-content-title {
                    color: #333;
                    font-weight: 500;
                    font-size: 15px;
                    text-align: center;
                    letter-spacing: 4px;
                    margin: 15px 0 30px;
                    white-space: nowrap;
                    z-index: 5;
                    position: relative;
                    transition: all 0.3s ease;
                }
            }

            .login-content-main-sacn {
                position: absolute;
                top: 0;
                right: 0;
                width: 50px;
                height: 50px;
                overflow: hidden;
                cursor: pointer;
                transition: all ease 0.3s;

                &-delta {
                    position: absolute;
                    width: 35px;
                    height: 70px;
                    z-index: 2;
                    top: 2px;
                    right: 21px;
                    background: var(--el-color-white);
                    transform: rotate(-45deg);
                }

                &:hover {
                    opacity: 1;
                    transition: all ease 0.3s;
                    color: var(--color-primary);
                }

                i {
                    width: 47px;
                    height: 50px;
                    display: inline-block;
                    font-size: 48px;
                    position: absolute;
                    right: 2px;
                    top: -1px;
                }
            }
        }

        .login-copyright {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 30px;
            text-align: center;
            color: var(--color-whites);
            font-size: 12px;
            opacity: 0.8;

            .login-copyright-company {
                white-space: nowrap;
            }

            .login-copyright-msg {
                @extend .login-copyright-company;
            }
        }
    }

    .img {
        width: 30px;
        margin-right: 4px;
    }

    .imgSize {
        width: 600px;
        // height: 25px;
    }
    h1 {
      line-height: 80px;
      font-size: 35px;
      font-weight: 600;
      color: #ffffff;
      letter-spacing: 2px;
      margin-bottom: 0;
    }

</style>
